<template>
    <view class="gyg-message">
        <van-nav-bar custom-class="select-nav-box" :title="typeItemData.msgTypeName" @click-left="onClickLeft"
            :left-arrow="showLeft">
            <image :src="readALl" class="readImg" slot="right"></image>
        </van-nav-bar>
        <view v-if="showItem">
            <view class="message-scan">
                <uni-icons type="checkbox-filled" size="34" color="#2b85e4" @click="logmessage"></uni-icons>
            </view>
            <view class="gyg-message-box" v-if="messageTypeList.length > 0">
                <view class="container">
                    <!-- 循环渲染列表项 -->
                    <view class="list-item" v-for="(item, index) in messageTypeList" :key="index"
                        @click="handleClick(item)">
                        <view class="icon-wrapper">
                            <image class="icon" :src="getItemIcon(item.msgType)" mode="widthFix"></image>
                        </view>
                        <view class="content">
                            <view class="title">{{ item.msgTypeName }}</view>
                            <view class="subtitle">{{ item.msgTitle }}</view>
                        </view>
                        <view class="right-area">
                            <view class="badge">
                                {{ 6 }}
                            </view>
                            <view class="time">{{ getTime(item) }}</view>

                        </view>
                    </view>
                </view>
            </view>

            <view v-else class="not-message">
                <u-empty mode="list" text="暂无数据">
                </u-empty>
            </view>
        </view>
        <view class="gyg-message-typebox" v-if="!showItem">
            <type-messages @close="closeTypePage" class=""></type-messages>
        </view>

    </view>

</template>

<script>
import dayjs from 'dayjs';
import typeMessages from './typeMessages.vue';


export default {
    components: {
        typeMessages
    },
    data() {
        return {
            showItemMessage: true,
            showLeft: false,
            typeItemData: {
                msgTypeName: '消息'
            },
            readALl: `${this.$baseIMGUrl}/static/assets/img/read.png`,
            showItem: true,
        }
    },
    computed: {
        appUserInfo() {
            // const storeInfo = uni.getStorage('appUserInfo')
            // const { appUserInfo } = this.$store.state.workbench
            // return Object.keys(appUserInfo).length > 1 ? appUserInfo : JSON.parse(storeInfo)
        },
        // 顶部高度数据
        commonHeight() {
            return this.$store.state.baseData.commonHeight
        },

        messageTypeList() {
            // return [
            //     {
            //         "msgType": 7,
            //         "msgTypeName": "公告",
            //         "msgTitle": "员工公告",
            //         "sendTime": 1762830370000,
            //         "count": 5,
            //         "readCount": 6
            //     },
            //     {
            //         "msgType": 5,
            //         "msgTypeName": "审批",
            //         "msgTitle": "待处理审批",
            //         "sendTime": 1762831242000,
            //         "count": 1,
            //         "readCount": 1
            //     },
            //     {
            //         "msgType": 1,
            //         "msgTypeName": "工单",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 2,
            //         "msgTypeName": "合同",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 3,
            //         "msgTypeName": "招商",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 4,
            //         "msgTypeName": "财务",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 6,
            //         "msgTypeName": "日报",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 8,
            //         "msgTypeName": "通知",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 9,
            //         "msgTypeName": "资产",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     },
            //     {
            //         "msgType": 19,
            //         "msgTypeName": "思源OA",
            //         "msgTitle": "",
            //         "sendTime": null,
            //         "count": 0,
            //         "readCount": 0
            //     }
            // ]
            return this.$store.state.workbench.messageTypeList
        },
        voiceMaskVis() {
            return this.$store.state.baseData.voiceMaskVis
        }
    },
    onLoad() {
        console.log(this.$store.state.baseData.commonHeight, 'baseData')
    },
    methods: {
        onClickLeft() {
            this.showLeft = false;
            this.showItem = true;
            this.typeItemData.msgTypeName = '消息'
        },
        closeTypePage() {
            console.log('111')
            this.showItem = !this.showItem
        },
        getItemIcon(type) {
            return `${this.$baseIMGUrl}/static/assets/img/message/icons/msgType${type}.png`
        },
        handleClick(data) {
            console.log(data, 'datatype')
            this.typeItemData = data;
            this.showItem = false;
            this.showLeft = true;
            // this.$store.commit('setMessageTypeItem', data)
            // setTimeout(() => {
            //     uni.navigateTo({ url: `pages/message/typeMessages?msgType=${data.msgType}` })
            // }, 20);
        },
        getTime(item) {
            return dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm");
            // if (!item.sendTime) return "";
            // return dayjs(item.sendTime).format("YYYY-MM-DD HH:mm");
        },
        async logmessage() {
            try {
                // 调用确认框，等待用户操作
                await this.$modal.show({
                    title: '确认',
                    content: '是否全部标记已读',
                    confirmText: '确认',
                    confirmColor: '#F53F3F', // 警告色
                    cancelText: '取消'
                });
                console.log('执行删除操作');
                // uni.showToast({ title: '删除成功', icon: 'success' });
            } catch (err) {
                // 用户点击取消或关闭弹窗
                console.log('取消删除');
            }
        },
        onClickItem(item) {
            // console.log(item);
            const itemInfo = encodeURIComponent(JSON.stringify(item));
            // uni.navigateTo({ url: `/pages/message/typeMessages?type=${itemInfo}` })
            // this.$router.push({ name: 'typeMessages', query: { ...item }})
        }

    }
}
</script>

<style lang="scss" scoped>
.gyg-message {
    width: 100%;

    position: relative;
    // top: 88rpx;
    // min-height: calc(100vh - 88rpx);




}

.gyg-message-typebox {
    width: 100%;
    height: 100%;
    position: relative;
}

::v-deep .select-nav-box {
    padding-top: 0px !important;
}

.readImg {
    width: 44rpx;
    height: 44rpx;
}

.gyg-message-box {
    width: 100%;
    height: 100%;
    position: relative;
    // top: 88rpx;

    .gyg-message-content {
        display: block;
        padding: 0 32rpx;
        width: 100vw;
        height: 80rpx;
    }
}

.container {
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    padding-top: 20rpx;
}

.list-item {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    // 底部边框（1px线适配）
    &::after {
        content: '';
        position: absolute;
        left: 30rpx;
        right: 30rpx;
        bottom: 0;
        height: 1px;
        background-color: #F5F5F5;
        transform: scaleY(0.5);
    }

    // 最后一项移除边框
    &:last-child::after {
        display: none;
    }
}

// 图标容器
.icon-wrapper {
    width: 88rpx;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    flex-shrink: 0; // 防止压缩
}

// 图标样式
.icon {
    width: 88rpx;
    height: 88rpx;
}

// 内容区域
.content {
    flex: 1; // 占满剩余空间
    overflow: hidden; // 防止内容溢出
}

// 标题样式
.title {
    font-size: 34rpx;
    font-weight: 600;
    color: #171E33;
    line-height: 1.2;
    margin-bottom: 8rpx;
}

// 副标题样式
.subtitle {
    font-size: 28rpx;
    color: #7C8598;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 右侧区域
.right-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

// 时间样式
.time {
    font-size: 26rpx;
    color: #C9CDD4;
    margin-bottom: 8rpx;
}

// 消息徽章
.badge {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    background-color: #FF503E;
    color: #FFFFFF;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.message-scan {
    position: absolute;
    bottom: 100rpx;
    right: 40rpx;
}

.not-message {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}
</style>